<template>
  <a-modal :visible="visible" :title="form.id ? '编辑' : '添加'" :width="700" forceRender ok-text="确认" cancel-text="取消"
    @ok="onSubmit" @cancel="onClose">
    <a-form ref="formRef" :model="form" :rules="rules">
      <a-form-item label="城市" name="cityCode">
        <DictSelectType ref="dictSelectType" :service-id="SERVICE_ID_ENUM.DICTIONARY.value"
          :dcit-type="DICT_TYPE_ENUM.CITY_SELECT.value" :height="400" v-model:value="form.cityCode" />
      </a-form-item>
      <a-form-item label="任务名称" name="taskName">
        <a-input v-model:value="form.taskName" placeholder="请输入任务名称" />
      </a-form-item>
      <a-form-item label="外部任务选择" name="outTaskId">
        <a-select v-model:value="form.outTaskId" style="width: 100%" placeholder="请选择" allowClear="true" size="middle"
          mode="combobox" @change="onChange">
          <a-select-option v-for="item in dictValueList" :key="item.key" :value="item.key">
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="form.remark" placeholder="请输入备注" :rows="3" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { message } from 'ant-design-vue';
import _, { fromPairs } from 'lodash';
import { nextTick, reactive, ref } from 'vue';
import { asApi } from '/@/api/addrstandard/as-api'
import { SmartLoading } from '/@/components/framework/smart-loading';
import { smartSentry } from '/@/lib/smart-sentry';
import DictSelectType from '/@/components/cache/dict-select-type.vue'
import { SERVICE_ID_ENUM, DICT_TYPE_ENUM } from '/@/constants/system/cache-service-id-const';

defineExpose({
  showModal,
});
const emit = defineEmits('refresh');

// --------------------- modal 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false);
const dictValueList = ref([]);

function showModal(record) {
  console.log('record', record)
  if (record) {
    Object.assign(form, record);
  }
  else {
    Object.assign(form, formDefault);
  }
  loadSelect();
  visible.value = true;
}

function onClose() {
  visible.value = false;
}

async function loadSelect() {
  let res = await asApi.findTodoTask(form);
  if (res.success)
    dictValueList.value = res.data;
}

// --------------------- 表单 ---------------------

//  组件
const formRef = ref();

const formDefault = {
  id: undefined,
  cityCode: undefined,
  taskName: undefined,
  outTaskId: undefined,
  remark: undefined,
};
let form = reactive({ ...formDefault });
const rules = {
  cityCode: [{ required: true, message: '请选择城市' }],
  taskName: [{ required: true, message: '请输入任务名称' }],
  outTaskId: [{ required: true, message: '请输入外部任务ID' }],
};

function onSubmit() {
  formRef.value
    .validate()
    .then(async () => {
      SmartLoading.show();
      try {
        let res = await asApi.updateAs(form);
        message.success(res.message);
        emit('refresh');
        onClose();
      } catch (error) {
        smartSentry.captureError(error);
      } finally {
        SmartLoading.hide();
      }
    })
    .catch((error) => {
      console.log('error', error);
      message.error('参数验证错误，请仔细填写表单数据!');
    });
}



</script>

<style lang="less" scoped>
.form-width {
  width: 100% !important;
}

.footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

:deep(.ant-card-body) {
  padding: 10px;
}
</style>
